<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" type="text/css"
	href="../../bootstrap-3.3.7/dist/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css"
	href="../../bootstrap-3.3.7/dist/css/bootstrap-theme.min.css" />
<link rel="stylesheet" type="text/css" href="../../css/index.css" />
<link rel="stylesheet" type="text/css" href="../../css/personal.css" />
<link rel="stylesheet" type="text/css" href="../../css/background.css" />

<script type="text/javascript"
	src="../../bootstrap-3.3.7/dist/js/jquery.min.js"></script>
<script type="text/javascript"
	src="../../bootstrap-3.3.7/dist/js/bootstrap.js"></script>
<!-- bootstrap表格插件 -->	
<script src="../../bootstrap-3.3.7/dist/js/bootstrap-table.js"></script>
<link href="../../bootstrap-3.3.7/dist/css/bootstrap-table.css" rel="stylesheet" />
<script src="../../bootstrap-3.3.7/dist/js/bootstrap-table-zh-CN.js"></script>
    
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link
	href="../../bootstrap-3.3.7/docs/assets/css/ie10-viewport-bug-workaround.css"
	rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<script src="../../js/echarts.min.js"></script>
</head>
<body>
	<div class="col-md-12"">
	<input type='text' id='way' hidden="true" value="<%=request.getParameter("way") %>"/>
	<input type='text' id='startdate' hidden="true" value="<%=request.getParameter("startdate") %>"/>
	<input type='text' id='enddate' hidden="true" value="<%=request.getParameter("enddate") %>"/>
		<ul id="myTab" class="nav nav-tabs">
   			<li class="active">
      			<a href="#table" data-toggle="tab">
         			表格
      			</a>
   			</li>
   			<li><a href="#zft" data-toggle="tab">直方图</a></li>
		</ul>
		<div id="myTabContent" class="tab-content">
		   <div class="tab-pane fade in active" id="table">
		   		<table id="zscount"></table>
		   </div>
		   <div class="tab-pane fade" id="zft" style="width:600px;height:400px;margin-left:100px;margin-top:100px">
		   </div>
		</div>
	</div>
</body>
<script type="text/javascript">
var zftChart = echarts.init(document.getElementById("zft"));
//指定图表的配置项和数据
zftChart.setOption({
	title : {
		text : '系统访问量直方图'
	},
	tooltip : {},
	legend : {
		data : ['访问量']
	},
	xAxis : {
		data : [],
		axisLabel:{
          interval:0,
          rotate:45,
          margin:2,
          textStyle:{
          color:"#222"
          }
      },
	},
	yAxis : {},
	series : [{
		name : '访问量',
		type : 'bar',
		data : []
	}]
});
$(function () {

    //1.初始化Table
    var oTable = new TableInit();
    oTable.Init();

    zftChart.showLoading(); //数据加载完之前先显示一段简单的loading动画

	var names = []; //类别数组（实际用来盛放X轴坐标值）
	var nums = []; //销量数组（实际用来盛放Y坐标值）

	$.ajax({
		type : "get",
		async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
		url : "../staticanaly/getAccessNumber", //请求发送到TestServlet处
		data : {
			limit : 10, //页面大小
			offset : 0, //页码初始开始值           
			starttime: $("#startdate").val(),
            endtime: $("#enddate").val(),
            way: $("#way").val() 
		},
		dataType : "json", //返回数据形式为json
		success : function(result) {
			//请求成功时执行该函数内容，result即为服务器返回的json对象
			var data=result.rows;
			if (data) {
				for (var i = 0; i < data.length; i++) {
					names.push(data[i].id); //挨个取出类别并填入类别数组
					nums.push(data[i].allnumber);
				}
				zftChart.hideLoading(); //隐藏加载动画
				zftChart.setOption({ //加载数据图表
					title : {
						text : '系统访问量直方图'
					},
					tooltip : {},
					legend : {
						data : ['访问量']
					},
					xAxis : {
						data : names
					},
					yAxis : {},
					series : [{
						name : '访问量',
						type : 'bar',
						data : nums
					}]
				});
			}
		},
		error : function(errorMsg) {
			//请求失败时执行该函数
			alert("图表请求数据失败!");
			zftChart.hideLoading();
		}
	})

});


var TableInit = function () {
    var oTableInit = new Object();
    //初始化Table
    oTableInit.Init = function () {
        $('#zscount').bootstrapTable({
            url: '../staticanaly/getAccessNumber',         //请求后台的URL（*）
            method: 'get',                      //请求方式（*）
            toolbar: '#toolbar',                //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            sortable: true,                     //是否启用排序
            sortOrder: "asc",                   //排序方式
            queryParams: oTableInit.queryParams,//传递参数（*）
            sidePagination: "server",            //分页方式：client客户端分页，server服务端分页（*）
            pageNumber:1,                       //初始化加载第一页，默认第一页
            pageSize: 10,                       //每页的记录行数（*）
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
            search: false,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
            strictSearch: true,
            showColumns: true,                  //是否显示所有的列
            showRefresh: true,                  //是否显示刷新按钮
            minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            height: 525,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "id",                     //每一行的唯一标识，一般为主键列
            showToggle:true,                    //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                   //是否显示父子表
            columns: [ {
                field: 'id',
                title: '时间'
            }, {
                field: 'allnumber',
                title: '访问量'
            }]
        });
    };

    //得到查询的参数
    oTableInit.queryParams = function (params) {
        var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
        		limit: params.limit,   //页面大小
                offset: params.offset,  //页码初始开始值           
                starttime: $("#startdate").val(),
                endtime: $("#enddate").val(),
                way: $("#way").val()   
        };
        return temp;
    };
    return oTableInit;
}; 
</script>
</html>